<template>
  <div class="login">
    <van-nav-bar>
      <template #left>
        <i class="iconfont f44">&#xe637;</i>
      </template>
    </van-nav-bar>
    <div class="container">
      <h3 class="title">您好,请登录</h3>
      <van-field placeholder="请输入手机号">
        <template #left-icon>
          <i class="iconfont">&#xe60b;</i>
        </template>
      </van-field>
      <van-field placeholder="请输入验证码">
        <template #left-icon>
          <i class="iconfont">&#xe60c;</i>
        </template>
        <template #button>
          <span class="code">获取验证码</span>
        </template>
      </van-field>
      <div class="other">
        登录即同意 <span>《用户使用协议》</span> 和 <span>《隐私协议》</span>
      </div>
      <van-button block round color="#e40137">确定</van-button>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.login {
  .f44 {
    font-size: 44px;
  }
  ::v-deep .van-nav-bar__left,
  ::v-deep .van-nav-bar__right {
    padding: 0;
  }
  .container {
    padding: 50px @p15 0;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-bottom: 63px;
    }
    .code {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #00b8d4;
      line-height: 22px;
      letter-spacing: 0px;
    }
    .other {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #181a39;
      line-height: 16px;
      letter-spacing: 0px;
      margin: 15px 0 44px;
      span {
        color: #00b8d4;
      }
    }
  }
}
</style>
